<!doctype html>
<html lang="zh">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Bootstrap 框架练习</title>
    <style>
         .container div {
             border:1px rgb(255, 206, 47) solid;
             margin-bottom:10px;
         }
         .h1 { color: lightblue;

         }
    </style>

  </head>
  <body>
        <p><a href="00/index.html">返回首页</a></p>

                
            
        </div>
        <div class="container-fluid">
            <h1>Bootstrap 框架练习</h1>
         </div>
         
         <div class="container">
                <div class="row">
                  <div class="col-sm">
                    One of three columns
                  </div>
                  <div class="col-sm">
                    One of three columns
                  </div>
                  <div class="col-sm">
                    One of three columns
                  </div>
                </div>
              </div>

              <div class="container">
                    <div class="row">
                      <div class="col">
                        1 of 3
                      </div>
                      <div class="col-6">
                        2 of 3 (wider)
                      </div>
                      <div class="col">
                        3 of 3
                      </div>
                      
                     </div>
                     <div class="row">
                            <div class="col-sm-8">col-sm-8</div>
                            <div class="col-sm-4">col-sm-4</div>
                          </div>

                          <div class="row">
                                <div class="col-md-4">.col-md-4</div>
                                <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
                              </div>
                    </div>
                  </div>

        <div class="container">
                <div class="row">
                  <div class="col">
                    One of three columns
                    </div>
                    <div class="col">
                    One of three columns
                    </div>
                    <div class="col">
                    One of three columns
                    </div>
                    <div class="col">
                            One of three columns
                            </div>
                        </div>
                    </div>

        
        <div class="container">
            <section>
                <h2>排版</h2>
                <h3>
                        Fancy display heading
                        <small class="text-muted">With faded secondary text</small>
                      </h3> 
                      <blockquote class="blockquote">
                            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                            <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                          </blockquote>
                          <p>
                              <img clsaa="img-fluid" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584536009080&di=18cec3fa1d999cce578bdbc30e016da7&imgtype=0&src=http%3A%2F%2Fwww.wowthemes.net%2Fassets%2Fimages%2Fthemes%2Fmediumish%2Fbootstrap.png" alt="bootstrap 4">
                          </p>
                          <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                  <li class="breadcrumb-item"><a href="#">Home</a></li>
                                  <li class="breadcrumb-item"><a href="#">Library</a></li>
                                  <li class="breadcrumb-item active" aria-current="page">Data</li>
                                </ol>
                              </nav>
                              <button type="button" class="btn btn-primary">Primary</button>
                              <div class="card" style="width: 18rem;">
                                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584536009080&di=18cec3fa1d999cce578bdbc30e016da7&imgtype=0&src=http%3A%2F%2Fwww.wowthemes.net%2Fassets%2Fimages%2Fthemes%2Fmediumish%2Fbootstrap.png" class="card-img-top" alt="...">
                                    <div class="card-body">
                                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                    </div>
                                  </div>
            </section>
        </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>